<template>
	<view class="page">
		<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;margin: 200rpx auto;"></canvas>
		<view class="btn" @click="inint">
			刷新二维码
		</view>
	</view>
</template>

<script>
	import {getQrcodeApi} from '@/common/api/commonApi/commonApi.js'
	// import UQRCode from '@uqrcode/js'; // npm install @uqrcode/js
	 import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
	export default {
		data() {
			return {
				qrcode :''
			}
		},
		methods: {
			inint(){
				getQrcodeApi().then(res=>{
					const query = uni.createSelectorQuery().in(this);
					this.qrcode = res.qrcode
					console.log(this.qrcode);
					var qr = new UQRCode();
					// 设置二维码内容
					qr.data = this.qrcode;
					// 设置二维码大小，必须与canvas设置的宽高一致
					qr.size = 200;
					// 调用制作二维码方法
					qr.make();
					// 获取canvas上下文
					var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
					// 设置uQRCode实例的canvas上下文
					qr.canvasContext = canvasContext;
					// 调用绘制方法将二维码图案绘制到canvas上
					qr.drawCanvas();
				})
			}
		},
		onLoad() {
			this.inint()
		},
		onShow() {
			
		},
	}
</script>

<style lang="scss" scoped>
.page{
	overflow: hidden;
	.btn{
		margin: 0 auto;
		width: 90%;
		height: 100rpx;
		border-radius: 50rpx;
		background: #4089f0;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 35rpx;
	}
}
</style>
